<template>
  <section class="pv-12 ph-16">
    <h3>公区电表分摊设置</h3>
    <el-table :data="list" style="max-width: 500px;">
      <el-table-column label="分组" prop="groupName"></el-table-column>
      <el-table-column label="水费单价" prop="unitPrice" min-width="250px">
        <template #default="{ row }">
          水费：{{ row.unitPrice }}元/吨
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="form.groupName" v-model="visible" @close="() => visible = false" :fullscreen="mobile" class="dialog-content-clear">
      <el-alert title="提示：水费单价设置应遵守国家法律法规相关规定" type="warning" :closable="false" />
      <div style="padding: 16px 20px;">
        <el-form :model="form" ref="formRef" label-width="100px">
          <el-form-item label="水费" prop="unitPrice" :rules="[{ required: true, message: '请输入水费单价', trigger: 'blur'},  { pattern: /^(0(\.0[0-9]|[1-9]\d)|[1-9]\d?(\.\d{1,2})?)?$/, message: '请设置水费单价为0.2 ~ 9.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.unitPrice" placeholder="请输入水费单价"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/吨</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="服务费" prop="servicePrice" :rules="[{ pattern: /^(0(\.0[0-9]|[1-9]\d)|[1-9]\d?(\.\d{1,2})?)?$/, message: '请设置水费单价为0.2 ~ 99.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.servicePrice" placeholder="请输入服务费"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/吨</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="管理费" prop="managePrice" :rules="[{ pattern: /^(0(\.0[0-9]|[1-9]\d)|[1-9]\d?(\.\d{1,2})?)?$/, message: '请设置水费单价为0.2 ~ 9.99元', trigger: 'blur'}]">
            <el-row :gutter="20" style="width: 100%">
              <el-col :span="16">
                <el-input v-model="form.managePrice" placeholder="请输入管理费"></el-input>
              </el-col>
              <el-col :span="4">
                <span>元/吨</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="() => visible = false">取消</el-button>
        <el-button type="primary" @click="handleOk">保存</el-button>
      </template>
    </el-dialog>
  </section>
</template>
<script setup name="PowerRate">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const list = ref([{
  groupName: '分组一',
  unitPrice: '1.00',
  servicePrice: '1',
  managePrice: '2'
}])
const visible = ref(false)

const data = reactive({
  form: {
    groupName: '',
    unitPrice: '',
    servicePrice: '',
    managePrice: ''
  }
})
const { form } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')

/* 编辑 */
function handleEdit(row) {
  console.log(row);
  form.value = { ...row }
  visible.value = true
}
/* 保存 */
function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      console.log(form.value);
      visible.value =  false
    }
  })
}
</script>
<style lang="scss" scoped>
.dialog-content-clear {
  .el-form-item--default {
    margin-bottom: 18px;
  }
}
</style>
